<template>
	<div class="kaochangguanli flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">
      <div class="mb20"><i class="el-icon-arrow-left" style="margin-right: 10px; font-weight: bold; cursor: pointer;" @click="$router.back(-1)"></i>{{$route.query.name}}成绩</div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="个人成绩" name="first">
          <el-table :data="tableData2" border style="width: 100%">
              <el-table-column prop="id_name" label="姓名"></el-table-column>
              <!-- <el-table-column prop="sex" label="性别"></el-table-column> -->
              <el-table-column label="组别">
                <template slot-scope="scope">
                  <div v-if="scope.row.match_type == 1">初中生组</div>
                  <div v-if="scope.row.match_type == 2">高中生组</div>
                  <div v-if="scope.row.match_type == 3">高职生组</div>
                  <div v-if="scope.row.match_type == 4">大学生组</div>
                  <div v-if="scope.row.match_type == 5">成人组</div>
                  <div v-if="scope.row.match_type == 6">小学组</div>
                  <div v-if="scope.row.match_type == 7">学生组</div>
                </template>
              </el-table-column>
              <el-table-column prop="entry_time" label="参赛时间"></el-table-column>
              <el-table-column prop="play_time" label="比赛用时"></el-table-column>
              <el-table-column prop="score" label="分数"></el-table-column>
              <el-table-column prop="ranking" label="名次"></el-table-column>

          </el-table>
        </el-tab-pane>
        <el-tab-pane label="团队成绩" name="second">
          <el-table :data="tableData" border style="width: 100%" @expand-change="kai">
              <el-table-column type="expand" >
                <template slot-scope="scope">
                  <div class="flexc" style="padding-left: 100px;">
                    <div style="background: #eaeaea; padding: 10px; flex: 1;">姓名</div>
                    <div style="background: #eaeaea; padding: 10px; flex: 1;">参赛时间</div>
                    <div style="background: #eaeaea; padding: 10px; flex: 1;">比赛用时</div>
                    <div style="background: #eaeaea; padding: 10px; flex: 1;">分数</div>
                    <div style="background: #eaeaea; padding: 10px; flex: 1;">名次</div>
                    <div style="background: #eaeaea; padding: 10px; flex: 1;">操作</div>
                  </div>
                  <div class="flexc" style="padding-left: 100px;" v-for="item in scope.row.list">
                    <div style="background: #fff; padding: 10px; flex: 1;">{{item.id_name}}</div>
                    <div style="background: #fff; padding: 10px; flex: 1;">{{item.entry_time}}</div>
                    <div style="background: #fff; padding: 10px; flex: 1;">{{item.take_time}}</div>
                    <div style="background: #fff; padding: 10px; flex: 1;">{{item.score}}</div>
                    <div style="background: #fff; padding: 10px; flex: 1;">{{item.ranking}}</div>
                    <div style="background: #fff; padding: 10px; flex: 1;"><el-button type="text">生成证书</el-button></div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="team_name" label="团队名"></el-table-column>
              <el-table-column prop="match_id" label="比赛id"></el-table-column>
              <el-table-column prop="team_id" label="队伍id"></el-table-column>
              <el-table-column prop="match_type" label="组别">
                <template slot-scope="scope">
                  <div v-if="scope.row.match_type == 1">初中生组</div>
                  <div v-if="scope.row.match_type == 2">高中生组</div>
                  <div v-if="scope.row.match_type == 3">高职生组</div>
                  <div v-if="scope.row.match_type == 4">大学生组</div>
                  <div v-if="scope.row.match_type == 5">成人组</div>
                  <div v-if="scope.row.match_type == 6">小学组</div>
                  <div v-if="scope.row.match_type == 7">学生组</div>
                </template>
              </el-table-column>
              <el-table-column prop="entry_time" label="参赛时间"></el-table-column>
              <el-table-column prop="take_time" label="比赛用时"></el-table-column>
              <el-table-column prop="score" label="分数"></el-table-column>
              <el-table-column prop="ranking" label="名次"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>




      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>

    </div>



	</div>
</template>

<script>

  import left from '../left.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      left
    },
		data() {
			return {
        activeName:'first',
        tableData:[],
        tableData2:[],

        search:{
          // name:"",
          // type:"",
          competition_id:this.$route.query.id,
          // page:1,
          // page_size:2000,
        },
        total:0,



			}
		},
		created() {
      this.getlist3()
		},
		mounted() {

		},
		methods: {
      kai(row) {
        this.getlist2(row)
      },

      handleClick:function(){
        this.search.page = 1
        if(this.search.activeName == 'first'){
          this.getlist3()
        }else{
          this.getlist()
        }
      },

      getlist:function(){
        axios.get(this.IP_URL+'/api/enrolment/teamrankscore',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            response.data.data.forEach(item=>{
              this.$set(item,'list',[])
            })
            this.tableData = response.data.data

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getlist2:function(row,competition_id,team_id){
        axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:{
          competition_id:row.match_id,
          team_id:row.team_id
        }}).then((response)=>{
        	if (response.data.msg.code == 0) {
            row.list = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getlist3:function(row,competition_id,team_id){
        axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.tableData2 = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
